<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html</title>
    <script src="static/js/jquery.min.js"></script>
</head>
<style>
    .button {
        background-color: #4CAF50; /* 绿色 */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
    .shortselect{
        background:#fafdfe;
        height:28px;
        width:120px;
        line-height:28px;
        border:1px solid #9bc0dd;
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        margin-right: 10px;
        border-radius:2px;
    }
</style>

<script>
    //定时刷牌价的牌价indexName
    var trade_select_price_indexName = "";
    //是否刷新最新价
    var isResh_trade_new_price_input=true;

    //点击交易列表时，更新trade_seq,做一个变量
    var trade_seqNo="";
///////////////////////////////////////////begin 页面初始化，加载下拉选(根据自选牌价刷新)//////////////////////////////////
    $(function(){
        //初始化下拉
        tradePage_getSelectIndexName_initSelect();
        //下拉事件绑定
        $("#mySelect").bind("change", function() {
            isResh_trade_new_price_input=true;
            trade_select_price_indexName = this.value;
            //加载完立刻更新价格
            tradePage_onSelect_Price(this.value);
        });
        //交易列表初始化
        flag_tradeList=false;
        getTradeList();
    });
    //定时器，更新下拉选
    interval_refush_initSelect = setInterval(function () {
        tradePage_getSelectIndexName_initSelect();
    }, 10000);
    //刷新按钮，手动重新初始化下拉选
    function tradePage_refush(){
        tradePage_getSelectIndexName_initSelect();
    };
    /*移除所有下拉选，并刷新下拉选*/
    function tradePage_getSelectIndexName_initSelect(){
        $.ajax({
            url: "selectPrice",
            type: 'post',
            dataType:'json',
            async: false,
            success: function (msg) {
                $("#mySelect").find("option").remove();//删除所有tr
                // $("#mySelect").prepend("<option value='0'>请选择</option>");//添加第一个option值
                for(var i=0;i<msg.length;i++){
                    addSelectList(msg[i],i);
                }
                var option = $(mySelect).find("option:contains('" + trade_select_price_indexName + "')").map(function(){
                    if ($(this).text() == trade_select_price_indexName) { $(this).prop("selected", true) }
                });
            },
            error:function(XMLHttpRequest, textStatus, errorThrown) {
                clearInterval(interval_refush_initSelect );//停止
            }});
    };

    //创建下拉选
    function addSelectList(data,i){
        var indexName = data.indexName;
        if (i == 0 &&trade_select_price_indexName=="" ) {
            trade_select_price_indexName = indexName;
        }
        $("#mySelect").prepend("<option id="+"option_id_"+indexName+" value="+indexName+">"+indexName+"</option>");

    };


///////////////////////////////////////////end 页面初始化，加载下拉选(根据自选牌价刷新)//////////////////////////////////

    ///////////////////////////////////////////end 定时器，更新选中价格//////////////////////////////////

    //定时器，更新选中价格
    interval_tradeSelectPrice = setInterval(function () {
        if (trade_select_price_indexName != "") {
            tradePage_onSelect_Price(trade_select_price_indexName);
        }
    }, 1000);
    //定时刷新选中的牌价
    function tradePage_onSelect_Price(indexName) {
        $.ajax({
            url: "spotPriceById",
            type: 'post',
            dataType:'json',
            data:{"indexName":indexName},
            async: false,
            success: function (msg) {
                trade_select_price_indexName = msg.indexName;
                var selectBuyPrice=$('#trade_new_buyPrice').text()
                $('#trade_new_Price').text(msg.ask);
                $('#trade_new_buyPrice').text(msg.bid);
                $('#trade_new_sellPrice').text(msg.ask);
                if (isResh_trade_new_price_input == true) {
                    $('#trade_new_price_input').val(msg.bid);
                }
                if ( msg.bid >selectBuyPrice) {
                    $('#trade_new_buyPrice').css("color","red");
                    $('#trade_new_sellPrice').css("color","red");
                }else{
                    $('#trade_new_buyPrice').css("color","green");
                    $('#trade_new_sellPrice').css("color","green");
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown) {
                clearInterval(interval_tradeSelectPrice );//停止
            }});
    };

    ///////////////////////////////////////////end end，更新选中价格//////////////////////////////////



///////////////////////////////begin 交易列表初始化，定时刷新交易列表///////////////////////////////////
    ///是否需要重新加载交易列表标志
    var flag_tradeList = false;
    //定时器，更新交易列表,更新交易列表是为了看波动
    interval_tradeList = setInterval(function () {
        getTradeList();
    }, 1000);
    //查询后台交易列表，并刷新交易列表
    function getTradeList(){
        $.ajax({
            url: "querytrade",
            type: 'post',
            dataType:'json',
            async: false,
            success: function (msg) {
                if (flag_tradeList == false) {
                    $("#table_trade_list").find("tr").remove();//删除所有tr
                }
                for(var i=0;i<msg.length;i++){
                    createTr_TradeList(msg[i],i);
                }
                flag_tradeList=true;
            },
            error:function(XMLHttpRequest, textStatus, errorThrown) {
                clearInterval(interval_tradeList );//停止
            }});
    };
    //定时器，是否重新加载交易列表标志为false
    // interval_refush_flag_tradeList = setInterval(function () {
    //     flag_tradeList=false;
    // }, 20000);

    //页面发起交易按钮
    function trade(btn){
        var lots = $('#table_modify_lots_lots').val();
        var price = $('#trade_new_price_input').val();
        $.ajax({
            url: "trade",
            type: 'post',
            dataType:'json',
            data:{"indexName":trade_select_price_indexName,"type":btn,"lots":lots,"price":price,"seqNo":this.trade_seqNo},
            async: false,
            success: function (msg) {
                if (msg.resultCode == "FAIL") {
                    alert(msg.resultMsg);
                }
                //交易成功后，立刻设置flag_tradeList=false，并刷新交易列表
                flag_tradeList=false;
                getTradeList();
            },
            error:function(XMLHttpRequest, textStatus, errorThrown) {
                clearInterval(interval_tradeSelectPrice );//停止
            }});
    };

    //构建交易列表html
    function createTr_TradeList(data,i) {
        //获取属性值
        var indexName = data.indexName;
        var seqNo = data.seqNo;
        var type = data.type;
        var lots = data.lots;
        var profit = data.profit;
        var tradePrice = data.tradePrice;
        //设置tr属性，一条白，一条灰色
        var strLine = '<tr  onclick="tradeList_select_tr(this)" class='+"str_tradeList"+seqNo+' id='+seqNo+'_tr'+'>';
        if (i % 2 != 0) {
            strLine = '<tr onclick="tradeList_select_tr(this)" style="background:#0000000A" class='+"str_tradeList"+seqNo+' id='+seqNo+'_tr'+'>';
        }
        //拼接一行数据，seq是唯一流水
        var $tr =
            // $("<tr class='str_page2"+indexName+"'>"+
            $(strLine+
                '<td style="display:none">'+seqNo+'</td>'+
                '<td class="tradeList_indexName" id='+seqNo+'_indexName'+'>'+indexName+'</td>'+
                '<td align="center" class ="tradeList_type" id='+seqNo+'_type'+'>'+type+'</td>'+
                '<td align="center" class ="tradeList_lots"  id='+seqNo+'_lots'+'>'+lots+'</td>'+
                '<td align="center" class ="tradeList_tradePrice"  id='+seqNo+'_tradePrice'+'>'+tradePrice+'</td>'+
                '<td align="center" class ="tradeList_tradePrice"  id='+seqNo+'_tradeProfit'+'>'+profit+'</td>'+
                '</tr>');
        //追加到tbody下，首次加载时，需要初始化交易列表
        if (flag_tradeList == false) {
            $("#table_trade_list").append($tr);
        }else{
            var profitId=seqNo+'_tradeProfit';
            $("#"+profitId).text(profit);
            if (profit > 0) {
                $("#"+profitId).css("color","red");
            }else {
                $("#"+profitId).css("color","green");
            }
        }
    };
///////////////////////////////end 交易列表初始化，定时刷新交易列表///////////////////////////////////

//////////////////////////////begin 点击交易列表事件///////////////////////////////////////////
    function tradeList_select_tr(btn) {
        var $tds = $(btn).children().siblings();
        var seqNo = $tds.eq(0).html();
        var indexName = $tds.eq(1).html();
        console.log(indexName);
        var price = $tds.eq(3).html();
        //设置当前点击的标红,上次点击的标黑
        $(".tradeList_indexName").css("color","black");
        $tds.eq(1).css("color","red");
        ////设置定时刷牌价的牌价indexName
        trade_select_price_indexName = indexName;
        ////点击交易列表时，更新trade_seq
        trade_seqNo = seqNo;

        //查看交易列表的indexName是否在下拉列表
        var optionId = "option_id_" + indexName;
        var isNewOptons=$("#" + optionId).val();
        if (indexName != isNewOptons) {
            $("#mySelect").prepend("<option id="+"option_id_"+indexName+" value="+indexName+">"+indexName+"</option>");
        }
        var option = $(mySelect).find("option:contains('" + trade_select_price_indexName + "')").map(function(){
            if ($(this).text() == trade_select_price_indexName) { $(this).prop("selected", true) }
        });
    };
//////////////////// end 点击交易列表事件///////////////////////////////////////////

    //交易价格加
    function trade_subtract_price(){
        isResh_trade_new_price_input=false;
        var price = $('#trade_new_price_input').val();
        $('#trade_new_price_input').val(price*1-1);
    };
    //交易价格减
    function trade_add_price(){
        isResh_trade_new_price_input=false;
        var price = $('#trade_new_price_input').val();
        $('#trade_new_price_input').val(price*1+1);
    };
    //交易数减
    function subtractLots(){
        var lots = $('#table_modify_lots_lots').val();
        $('#table_modify_lots_lots').val(lots*1-1);

    };
    //交易数加
    function addLots(){
        var lots = $('#table_modify_lots_lots').val();
        $('#table_modify_lots_lots').val(lots*1+1);
    };

</script>

<body>
        <table id="table_price" width="100%">
            <thead>
            <tr>
                <td width="80%" align='center' >
                    <input  style="float: left;margin-top: 1px;margin-right: 10px;margin-left: 10px"  type="button" onclick="tradePage_refush();" value="刷下拉"/>
<!--                    <div style="float: left;margin-top: 1px;margin-right: 10px;margin-left: 10px">-->
<!--                        自选-->
<!--                    </div>-->
                    <select  style="float: left" id="mySelect" class="shortselect" >
                        <option>Apple</option>
                        <option>Orange</option>
                        <option>Pineapple</option>
                        <option>Banana</option>
                    </select>
<!--                    <input  style="float: left"  type="button" onclick="tradePage_refush();" value="刷新"/>-->
                    <div style="float: left">
                        自选
                    </div>
                </td>
                <td  width="20%" align='center' >
                    <div style="float: left">新:</div><div id="trade_new_Price" style="float: left">2851</div>
                </td>
            </tr>
            </thead>
        </table>

        <table id="table_modify_price" width="100%">
            <thead>
            <tr>
                <td width="80%" align='center' >
                    <p style="float: left;margin-top: 1px;margin-right: 2px;margin-left: 0px" >成交价</p>
                    <input  style="float: left;margin-top: 1px;margin-right: 10px;margin-left: 10px"  width="20%" type="button" onclick="trade_subtract_price();" value="-"/>
                    <input  id="trade_new_price_input" size='10px' style="float: left;margin-top: 1px;margin-right: 10px;margin-left: 0px" type="text"  value="-1">
                    <input  style="float: left"  width="20%" type="button"  onclick="trade_add_price();" value="+"/>
                </td>
                <td  width="20%" align='center' >
                    <div style="float: left">卖:</div><div id="trade_new_sellPrice" style="float: left">2851</div>
                </td>
            </tr>
            </thead>
        </table>

        <table id="table_modify_lots" width="100%">
            <thead>
            <tr>
                <td width="80%" align='center' >
                    <p style="float: left;margin-top: 1px;margin-right: 2px;margin-left: 0px" >手数量</p>
                    <input  style="float: left;margin-top: 1px;margin-right: 10px;margin-left: 10px"  width="20%" type="button" onclick="subtractLots();" value="-"/>
                    <input  size='10px' style="float: left;margin-top: 1px;margin-right: 10px;margin-left: 0px" type="text" id="table_modify_lots_lots" value="1">
                    <input  style="float: left"  width="20%" type="button" onclick="addLots();" value="+"/>
                </td>
                <td  width="20%" align='center' >
                    <div style="float: left">买:</div><div id="trade_new_buyPrice" style="float: left;background-color: #E0E0E0; color: #0A0A0A;">2851</div>
                </td>
            </tr>
            </thead>
        </table>


        <table id="table_trade" width="100%">
            <thead>
            <tr>
                <td width="33%" align='center' >
                    <input class="button button1" width="50%" type="button" style="background-color: #f44336; color: #e9e9e9;" onclick="trade(1);" value="加多"/>
                </td>
                <td width="33%" align='center' >
                    <input class="button button2" width="50%" type="button" style="background-color: #1dc116; color: #e9e9e9;" onclick="trade(2);" value="加空"/>
                </td>
                <td width="34%" align='center' >
                    <input class="button button3" width="50%" type="button" style="background-color: #008CBA; color: #e9e9e9;" onclick="trade(3);" value="平仓"/>
                </td>
            </tr>
            </thead>
        </table>

        <table width="100%">
            <tr style="background:#0000000A">
                <td width="20%" align='center'>合约名称</td>
                <td width="20%" align='center'>类型</td>
                <td width="20%" align='center'>持仓</td>
                <td width="20%" align='center'>开仓均价</td>
                <td width="20%" align='center'>逐笔盈亏</td>
            </tr>
            <tbody id="table_trade_list" width="100%">

            </tbody>
        </table>

<!--        &lt;!&ndash;页面和数据在trade.html&ndash;&gt;-->
<!--        <table id="table_trade_list" width="100%">-->

<!--        </table>-->

</body>
</html>